<template>
  <div class="all-mv">
    <div class="title"><h3>全部MV</h3></div>
    <ul class="sort">
      <span class="name">地区: </span>
      <li class="sort-item" v-for='(item, i) in areas' :key='i'>
        <span :class='{active: i === areasIndex}' @click='changeAreaIndex(i)'>{{item}}</span>
      </li>
    </ul>
    <ul class="sort">
      <span class="name">类型: </span>
      <li class="sort-item active" v-for='(item, i) in typesArr' :key='i'>
        <span :class='{active: i === typesIndex}' @click='changeTypesIndex(i)'>{{item}}</span>
      </li>
    </ul>
    <ul class="sort">
      <span class="name">排序: </span>
      <li class="sort-item active" v-for='(item, i) in orderArr' :key='i'>
        <span :class='{active: i === orderIndex}' @click='changeOrderIndex(i)'>{{item}}</span>
      </li>
    </ul>

    <MvItem :lists='lists' :mv='true'></MvItem>    
  </div>
</template>

<script>
import MvItem from '@/components/content/common/MvItem';
import axios from '@/utils/axios';
export default {
    data() {
        return {
            lists: [],
            types: ['全部', '全部', '上升最快'],
            areas: ['全部', '内地', '港台', '欧美', '韩国', '日本'],
            typesArr: ['全部', '官方', '原生', '现场版', '网易出品'],
            orderArr: ['上升最快', '最热', '最新'],
            orderIndex: 0,
            typesIndex: 0,
            areasIndex: 0
        }
    },
    methods: {
        changeAreaIndex(i) {
            this.areasIndex = i;
            this.types[0] = this.areas[i];
            this.getArr();
        },
        changeTypesIndex(i) {
            this.typesIndex = i;
            this.types[1] = this.typesArr[i];
            this.getArr();
        },
        changeOrderIndex(i) {
            this.orderIndex = i;
            this.types[2] = this.orderArr[i];
            this.getArr();
        },
        getArr() {
            this.sendMv();
        },
        sendMv() {
            axios.get('/mv/all', {params: {limit: 100, area: this.types[0], type: this.types[1], order: this.types[2]}}).then(res => {
            this.lists = res.data;
        })
        }
    },
    created() {
        this.sendMv()
    },
    components: {
        MvItem
    }
};
</script>

<style lang="scss" scoped>
.all-mv {
  padding: 3rem 2rem;
  .title {
    h3 {
      font-size: 2.3rem;
      font-weight: bold;
    }
  }
  .sort {
    display: flex;
    margin-top: 2rem;
    .sort-item {
      height: 2.1rem;
      width: 8rem;
      text-align: center;
      margin-left: 1rem;
      cursor: pointer;
      border-right: 3px solid #f2f2f2;
      span.active {
        display: inline-block;
        background: #fcebeb;
        padding: 0 0.9rem;
        color: #f40;
        border-radius: 1rem;
        font-size: 1.3rem;
      }
    }
  }
}
</style>